import { useRouter } from "next/router"
// import { useAccount } from "wagmi"

import BlueStarsBgLayout from "@/components/shared/components/BlueStarsBgLayout"
import TokenPage from "@/components/morphoStrategy/TokenPage"
// import useNftGating from "@/components/morphoStrategy/hooks/useNftGating"
// import NftGatingModal from "@/components/morphoStrategy/NftGatingModal"
import { BASE_CHAIN_ID } from "@/constants"
import { useIsMobile } from "@/hooks/use-is-mobile"
import MobileView from "@/components/morphoStrategy/MobileView"
import { MorphoHeadComponent } from ".."

export default function MorphoTokenPage() {
  const { query } = useRouter()
  // const { hasNftData } = useNftGating()
  // const { address } = useAccount()
  const { token } = query

  const isMobile = useIsMobile()

  if (isMobile) return <MobileView />

  return (
    <>
      {/* {(!address || !hasNftData.value) && (
        <NftGatingModal loading={hasNftData.loading} />
      )} */}
      <MorphoHeadComponent />

      <BlueStarsBgLayout
        token={token as string}
        desiredChainIds={[BASE_CHAIN_ID]}
      >
        <TokenPage token={token as string} />
      </BlueStarsBgLayout>
    </>
  )
}